import install from "./install";
import { createMatcher } from "./create-matcher";
import HashHistory from "./history/hash";
import BrowserHistory from "./history/history";
class VueRouter {
  constructor(options = {}) {
    // 根据路由的配置参数进行格式化操作 {}

    // 创建一个匹配器 用于匹配记录
    this.matcher = createMatcher(options.routes || []); // 两个方法 match, addRoutes

    switch (options.mode) {
      case "hash": // hashonchange window.location.hash
        this.history = new HashHistory(this);
        break;
      case "history": // history.pushState  popstate事件
        this.history = new BrowserHistory(this);
        break;
    }
    this.beforeEachHooks = [];
  }
  beforeEach(hooks){
    this.beforeEachHooks.push(hooks);
  }
  push(to){
    this.history.push(to)
  }
  match(location){
    return this.matcher.match(location); // {path:'/about/a',matched:[]}
  }
  init(app) {
    // app就是根实例
    // 拿到路径匹配记录，监听路径的变化
    const history = this.history;

    // 跳转到某个路径上,跳转成功后监听路由的变化 

    history.transitionTo(history.getCurrentLocation(),history.setupListener);

    history.listen((route)=>{ // 这个回调的目的是更新app._route这个_route是一个响应式的变量
        app._route = route;  //  app._route === current
    })

    // 路径变化后需要渲染组件  有一个响应式的变量， 等这个变量变化了 就切换组件
  }
  addRoutes(routes) {
    this.matcher.addRoutes(routes);

  }
}
VueRouter.install = install;

export default VueRouter;
